Stage 2: Configure the stylesheet

Next we build a stylesheet for the Page View using a combination of XHTML and XSLT. The complete W3C specification for XSLT is available at www.w3c.org/tr/xslt.

Our example is quite simple and is based on the W3C's Literal Result Element as Stylesheet specification. Before we proceed with building the stylesheet, consider this illustration taken from the W3C specification:

<html xsl:version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns="http://www.w3.org/TR/xhtml1/strict">
	<head>
		<title>Expense Report Summary</title>
	</head>
	<body>
		<p>Total Amount: <xsl:value-of select="expense-report/total"/></p>
	</body>
</html>

Note the following:

  1. The xsl:version attribute must be added to the opening <html> tag; this indicates the XSL version that the stylesheet requires. Simply copy and paste this as is.
  2. The page and text is formatted using standard XHTML tags.
  3. The XSLT value-of element together with the select attribute define the pathway to and name of the data to be used by the Page View (information that is found in the xmldata.xml file created in the previous Stage).

Configuring a stylesheet for the Page View is done with a combination of XHTML and XSLT and can be achieved using an XSL editor (such as Cooktop) or a WYSIWYG web development tool (such as FrontPage).

Tip: If you wish to modify sample code rather than creating a stylesheet from scratch, proceed to Use the Sample Code below. It may however be worth looking at Use an XSL Editor in order to understand how a stylesheet is created.

In this example the freeware Cooktop application is used.

To build the Page View stylesheet:

  1. Open xmldata.xml in an editor (if the file did not open automatically in an editor at Step 12 in the previous Stage):

    Edit XML

    Note: xmldata.xml is typically located in the Windows default temp directory for the currently logged on user (C:\Documents and Settings\user\Local Settings\Temp where user is the name of the currently logged on user).

  2. If using Cooktop, select the stylesheet(xsl) tab.
  3. The stylesheet requires an opening <html> and a closing </html> tag and the opening tag must include the xsl:version attribute (this can simply be copied and pasted as is into the XSLT editor):

    <html xsl:version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns="http://www.w3.org/TR/xhtml1/strict">

    </html>

  4. Use XHTML tags to define the layout and look of the Page View.

    Note: It is important when using HTML tags that they have an opening and closing tag.

    You can define a title (in this example Parties Page View) and must define a body. In the body, add the field labels and any label formatting to display in the Page View:

    <html xsl:version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns="http://www.w3.org/TR/xhtml1/strict">
    	<title>Parties Page View</title>
     	<body>
     		<b>Given Name: </b> <br/>
     		<b>Surname: </b> <br/>
     	</body>
    </html>

    Note: Note the XHTML <br/> tag. This denotes a line break.

  5. The XSLT value-of element and select attribute together define the pathway to and name of the data that will be displayed in the Page View. These are placed between the opening <body> and closing </body> tags:
    <html xsl:version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns="http://www.w3.org/TR/xhtml1/strict">
        <title>Parties Page View</title>
     	<body>
    	 	<b>Given Name: </b> <xsl:value-of select="/table/tuple/atom[@name='NamFirst']"/>
    		<b>Surname: </b> <xsl:value-of select="/table/tuple/atom[@name='NamLast']"/>
    	</body>
    </html>
    The value used by the select statement (after the equals sign) is taken from the xmldata.xml file. The relevant section is enclosed by the <table> tags and defines the hierarchical path to the value (atom):
    <table name="eparties">
    	<!--Row 1 -->
    	<tuple>
    		<atom name="NamFirst">Gerard</atom>
    		<atom name="NamLast">Wood</atom>
    	</tuple>
    </table>

    To display the NamFirst value beside the Given Name label, first:

    1. Map the path to the value from the opening table tag: /table/tuple/atom
    2. Specify the attribute in the format: [@name='NamFirst']
    3. Enclose the entire statement in double quotes:

    <b>Given Name: </b> <xsl:value-of select="/table/tuple/atom[@name='NamFirst']"/>

    Note: Single and double quotes can be used interchangeably so long as you are consistent within a statement.

    Simple Stylesheet

  6. Save the stylesheet (in this case the file is saved as xmldata.xsl).

In the final Stage we attach the new stylesheet to the Page View (report) defined in Stage 1.

This example uses MS FrontPage.

Note: See Using an XSL Editor above for details about the required XSLT code.

  1. Layout the page in the web development tool:

    The HTML for this layout appears as:

  2. Edit the HTML to include the xsl:version information and to specify the XSLT value-of element and selectattribute (see Using an XSL Editor for details):

    Note: It is vital when creating an xsl stylesheet that all HTML tags have an opening and closing tag. When MS FrontPage generates HTML, it does not necessarily close all tags. In the example above, the <meta> tags had no closing </meta>. These have been added (you could, in this case, delete the meta information entirely).
    One method might be to lay out the page in FrontPage and then copy the generated HTML to Cooktop which automatically checks for any invalid code.

  3. Save the file. By default it is saved as a .html file.
  4. Change extension to .xsl
  1. Copy and paste the sample .xsl code below into a Text or Code editor.
  2. Add or delete fields where indicated and as required.
  3. Save the code as a .xsl file.
  4. At Step 3, attach the .xsl file you just saved.

Note: If your version of EMu is older than version 5.0, replace encoding="UTF-8" with encoding="iso-8859-1" in the following code.

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:emu="http://kesoftware.com/emu">
    <xsl:output method="html" encoding="UTF-8" />
    <!--Lookup Table for prompts
    Add or delete fields to match those selected at Stage 1-->
    <emu:column name="SummaryData" show="no" />
    <emu:column name="MulMultiMediaRef_tab" show="no" />
    <emu:column name="NamFirst">First</emu:column>
    <emu:column name="NamLast">Last</emu:column>
    <emu:column name="NamBriefName">Brief</emu:column>
   <!--It is not necessary to make changes to the rest of this file. However it is possible to change the format and look of the stylesheet through appropriate modifications -->
   <!--The root transformation -->
    <xsl:template match="/">
        <html>
            <head>
                <xsl:call-template name="styles" />
                <xsl:call-template name="scripts" />
            </head>
            <body class="sheet" onLoad="loaded()">
                <xsl:call-template name="body" />
            </body>
        </html>
    </xsl:template>
    <!--
            Body template
     -->
    <xsl:template name="body">
        <xsl:for-each select="/table/tuple">
            <xsl:call-template name="record" />
            <xsl:if test="position() != last()">
                <p />
            </xsl:if>
        </xsl:for-each>
    </xsl:template>
    <!--
           CSS styles template
     -->
    <xsl:template name="styles">
        <style type="text/css">
            <xsl:text>
body.sheet
{
    background-color: #CCCCCC;
    color: #c41230;
    font-family: Arial;
}
table.sheet
{
    width: 95%;
    border-width: 2px;
    border-style: solid;
    border-collapse: collapse;
    background-color: #EEEEEE;
    border-color: #0E6CA5;
}
td.heading
{
    background-color: #0E6CA5;
    color: #FFFFFF;
    font-weight: bold;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    padding-left: 0.5em;
    padding-right: 0.5em;
}
table.picture
{
    width: 100%;
}
table.icon
{
    border-width: 2px;
    border-style: solid;
    border-color: #c41230;
}
img.icon
{
    width: 150px;
    height: auto;
}
td.icon
{
    width: 0px;
}
table.data
{
    width: 100%;
}
td.title
{
    color: #32731e;
    font-weight: bold;
    text-align: center;
    width: 100%;
    padding-top: 2em;
    padding-bottom: 2em;
    padding-left: 0.5em;
    padding-right: 0.5em;
}
td.atomprompt
{
    width: 160px;
    font-weight: bold;
    font-size: smaller;
    vertical-align: top;
    padding-left: 0.5em;
    padding-right: 0.5em;
}
td.atomvalue
{
    font-size: smaller;
    padding-left: 0.5em;
    padding-right: 0.5em;
}
td.tableprompt
{
    width: 160px;
    font-weight: bold;
    font-size: smaller;
    vertical-align: top;
    padding-left: 0.5em;
    padding-right: 0.5em;
}
td.tablevalue
{
        font-size: smaller;
        padding-left: 0.5em;
        padding-right: 0.5em;
}
table.nesttab
{
        border-width: 1px;
        border-style: solid;
        border-color: #c49ca3;
        border-collapse: collapse
}
tr.nesttab
{
        width: 160px;
        border-width: 1px;
        border-style: solid;
        border-color: #c49ca3;
        padding-left: 0.5em;
        padding-right: 0.5em;
        }

 

td.nesttab
{
        font-size: smaller;
        padding-left: 0.5em;
        padding-right: 0.5em;
        border-width: 1px;
        border-style: solid;
        border-color: #c49ca3;
}
td.nesthead
{
    width: 160px;
    font-weight: bold;
    font-size: smaller;
    vertical-align: top;
    padding-left: 0.5em;
    padding-right: 0.5em;
    border-color: #c49ca3;
    border-width: 1px;
        border-style: solid;
}
</xsl:text>
        </style>
    </xsl:template>
    <!--
            Scripts template
     -->
    <xsl:template name="scripts">
        <script type="text/javascript">
            <xsl:text>
function loaded()
{
    var tables = document.getElementsByTagName("table");
    for (var index = 0; index &lt; tables.length; index++)
    {
        if (tables[index].id == "datatable")
            for (var row = 0; row &lt; tables[index].rows.length; row++)
                if (row % 2 == 0)
                    tables[index].rows[row].bgColor = "#FFFFFF";
    }
}
</xsl:text>
        </script>
    </xsl:template>
    <!--
            Record template
     -->
    <xsl:template name="record">
        <center>
            <table border="1" class="sheet">
                <xsl:call-template name="heading" />
                <xsl:call-template name="image" />
                <xsl:call-template name="data" />
            </table>
        </center>
    </xsl:template>
    <!--
            Heading template
     -->
    <xsl:template name="heading">
        <tr class="heading">
            <td class="heading">
                <xsl:value-of select="atom[@name='SummaryData']" />
            </td>
        </tr>
    </xsl:template>
    <!--
            Image template
     -->
    <xsl:template name="image">
        <tr class="image">
            <td class="image">
                <table class="picture">
                    <tr class="picture">
                        <xsl:if test="table/tuple/atom[@name='Multimedia']">
                            <td class="picture">
                                <table class="icon">
                                    <tr class="icon">
                                        <td class="icon">
                                            <img class="icon">
                                                <xsl:attribute name="src">
                                                    <!--xsl:for-each select="table/tuple/atom"-->
                                                    <!--xsl:value-of select="." /-->
                                                    <xsl:value-of select="concat('file:///', translate(table/tuple/atom[@name='Multimedia'], '\', '/'))" />
                                                    <!--/xsl:for-each-->
                                                </xsl:attribute>
                                            </img>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </xsl:if>
                    </tr>
                </table>
            </td>
        </tr>
    </xsl:template>
    <!--
            Data template
     -->
    <xsl:template name="data">
        <tr class="values">
            <td class="values">
                <table border="0" class="data" id="datatable">
                    <xsl:apply-templates select="*" />
                </table>
            </td>
        </tr>
    </xsl:template>
    <!--
            Atom template
     -->
    <xsl:template match="atom">
        <xsl:variable name="column" select="document('')/*/emu:column[@name=current()/@name]" />
        <xsl:if test="not($column/@show ="no") and ($column/@showempty ="yes" or text())">
            <tr class="atomvalue">
                <td class="atomprompt">
                    <xsl:call-template name="prompt">
                        <xsl:with-param name="column" select="$column" />
                    </xsl:call-template>
                </td>
                <td class="atomvalue">
                    <xsl:value-of select="." />
                </td>
            </tr>
        </xsl:if>
    </xsl:template>
    <!--
            Table template
     -->
    <xsl:template match="table">
        <xsl:variable name="column" select="document('')/*/emu:column[@name=current()/@name]" />
        <xsl:if test="not($column/@show ="no") and ($column/@showempty ="yes" or count(child::node()) != 0)">
            <tr class="tablevalue">
                <td class="tableprompt">
                    <xsl:call-template name="prompt">
                        <xsl:with-param name="column" select="$column" />
                    </xsl:call-template>
                </td>
                <td class="tablevalue">
                    <xsl:for-each select="tuple/atom">
                        <xsl:value-of select="." />
                        <br />
                    </xsl:for-each>
                </td>
            </tr>
        </xsl:if>
    </xsl:template>
    <!--
            Nested Table template
     -->
    <xsl:template match="*[contains(@name,'_nesttab')]">
        <xsl:variable name="column" select="document('')/*/emu:column[@name=current()/@name]" />
        <xsl:if test="not($column/@show ="no") and ($column/@showempty ="yes" or count(child::node()) != 0)">
        	<xsl:for-each select=".//*[contains(@name,'_nesttab')]">
            <tr class="tablevalue">
                <td class="tableprompt">
                    <xsl:call-template name="prompt">
                        <xsl:with-param name="column" select="$column" />
                    </xsl:call-template>
                </td>
                <td class="tablevalue">
                   	<xsl:for-each select="tuple/atom">
                       	<xsl:value-of select="." />
                      	<br />
                    </xsl:for-each>
                </td>
            </tr>
            </xsl:for-each>
        </xsl:if>
    </xsl:template>
    <!--
            Prompt template
     -->
    <xsl:template name="prompt">
        <xsl:param name="column" />
        <xsl:choose>
            <xsl:when test="$column/text()">
                <xsl:value-of select="$column/text()" />
            </xsl:when>
            <xsl:otherwise>
                <xsl:value-of select="@name" />
            </xsl:otherwise>
        </xsl:choose>
    </xsl:template>
</xsl:stylesheet>